<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />

		<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css" />

		<!--
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop2.css"/>
        	作者：592176224@qq.com
        	时间：2019-04-27
        	描述：
		<link rel="stylesheet" type="text/css" href="../business/css/empcss.css"/>
        -->
		<style type="text/css">
			.content {
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			
			.search {
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			
			.stext {
				width: 25%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 1px solid #C7C7CC;
			}
			
			.simg {
				width: 30px;
				height: 30px;
			}
			
			.simg>img {
				width: 100%;
				height: 100%;
			}
			
			.ssdiv {
				width: 75%;
			}
			
			.ssinp {
				width: 100%;
				height: 100%;
				border: 0;
			}
			
			.cmain {
				width: 100%;
			}
			
			.topdiv {
				width: 100%;
				display: flex;
				justify-content: center;
				align-content: center;
				background-color: white;
			}
			
			.topdiv>div {
				width: 25%;
				height: 3em;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1px solid #C7C7CC;
			}
			
			.brno {
				border-right: 0 !important;
			}
			
			.sjx {
				width: 0;
				height: 0;
				margin: 2px;
				border: 6px solid transparent;
				border-top: 6px solid #000000;
				position: relative;
				top: 15%;
			}
			
			.sj {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
			}
			
			.tc {
				display: inline-block;
				position: relative;
				width: 0;
				height: 0;
				border: 5px solid transparent;
				border-top-color: #CBCCCC;
				margin: 2px;
			}
			
			.tr {
				display: inline-block;
				position: relative;
				width: 0;
				height: 0;
				border: 5px solid transparent;
				border-top-color: black;
				margin: 2px;
			}
			
			.bc {
				display: inline-block;
				position: relative;
				width: 0;
				height: 0;
				border: 5px solid transparent;
				border-bottom-color: #CBCCCC;
				margin: 2px;
			}
			
			.br {
				display: inline-block;
				position: relative;
				width: 0;
				height: 0;
				border: 5px solid transparent;
				border-bottom-color: black;
				margin: 2px;
			}
			
			.textlist {
				width: 100%;
				padding: 10px;
			}
			
			.checklist {
				background-color: white !important;
				border-radius: 0.5em;
			}
			
			.flex1 {
				width: 85%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0.5em;
			}
			
			.left {
				width: 30%;
			}
			
			.left>img {
				width: 100%;
			}
			
			.right {
				padding-left: 1em;
				width: 80%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				color: #676664;
			}
			
			.right>div {
				padding: 0.2em;
			}
			
			.listdivcss {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: white;
				border-radius: 0.5em;
				margin: 0.2em 0;
			}
			
			.mui-checkbox input[type=checkbox] {
				top: 0px !important;
			}
			
			* {
				font-size: 0.95em;
			}
			
			.footdiv {
				z-index: 99;
			}
			
			.mui-input-row .mui-btn {
				float: right;
				width: 60%;
				padding: 11px 15px;
			}
			
			.borbot {
				border-bottom: 1px solid #BBBBBB;
			}
			
			.place button {
				width: 100%;
				color: #676664 !important;
				border: 0 !important;
				padding: 11px 15px;
				text-align: right;
			}
			
			.select {
				background-color: #007aff;
				color: white;
			}
			
			.listdiv {
				padding: 11px;
			}
			
			.footbutdiv {
				position: absolute;
				bottom: 20px;
				width: calc(100% - 22px);
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.footbutdiv>button {
				width: 40%;
			}
			
			.mui-popover .mui-btn-block {
				margin-bottom: 0;
			}
			
			
			.hicon>img {
			    width: 2.5em;
			    height: 2.5em;
			}
			.hicon{
				z-index: 9999 !important;
			}
			h1{
				width: 50% !important;
				margin: 0 auto !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
			<h1 class="mui-title">会员管理</h1>
			
			
			<div class="hicon mui-icon-right-nav mui-pull-right" id="adddiv">
				<img src="../img/add.png" />
			</div>
			
			<div class="hicon mui-icon-right-nav mui-pull-right" id="store">
		    	<img src="../img/storeimg.png"/>
		    </div>
		</header>
		<!--
        	作者：592176224@qq.com
        	时间：2019-03-05
        	描述：
        	
        -->
		<div id="refreshContainer" class="mui-scroll-wrapper mui-content">

			<div class="mui-scroll">

				<!--
                	作者：592176224@qq.com
                	时间：2019-04-26
                	描述：
			<div class="mui-input-row borbot" >
				<label>门店:</label>
	    		<div class="place items">
				    <button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">门店选择</button>
				</div>
			</div> 	
                -->

				<div class="content">

					<div class="search">
						<div class="stext fe09" id="stext">
							手机
							<div class="sjx">
							</div>
						</div>
						<div class="ssdiv">
							<form action="" onkeydown="if(event.keyCode==13)return false;">
								<input id="keyvalue" class="ssinp" type="" name="" id="" value="" placeholder="请输入手机号/卡号/姓名" />
							</form>
						</div>
						<div class="simg" id="smid">
							<img src="../img/saomiao.png" />
						</div>
					</div>
					<!--
                	作者：592176224@qq.com
                	时间：2019-04-30
                	描述：
		    	<div class="search">
		    		<div class="simg">
		    			<img src="../img/ss-img2.png"/>
		    		</div>
		    		<div class="ssdiv">
		    			<form action="" onkeydown="if(event.keyCode==13)return false;">
							<input id="keyvalue" class="ssinp" placeholder="请输入关键词检索" />
						</form>
		    		</div>
		    		<div class="simg" id="smid">
		    			<img src="../img/saomiao.png"/>
		    		</div>
		    	</div>
		    	 -->
				</div>
				<div class="cmain">
					<div class="topdiv">
						<div class="bgw" id="allid">
							<div id="alltext">
								全部
							</div>
							<div class="sjx">
							</div>
						</div>
						<div class="" id="kye">
							卡余额
							<div class='sj'>
								<div class="bc"></div>
								<div class="tr"></div>
							</div>
						</div>
						<div class="" id="ljxf">
							累计消费
							<div class='sj'>
								<div class="bc"></div>
								<div class="tr"></div>
							</div>
						</div>
						<div class="brno" id="xftime">
							消费时间
							<div class='sj'>
								<div class="bc"></div>
								<div class="tr"></div>
							</div>
						</div>

					</div>
				</div>
				<div class="textlist" id="tlist">
					<!--
                	作者：592176224@qq.com
                	时间：2019-01-23
                	描述：
               
		    	<div class="listdivcss">
		    		<div class="flex1">
		    	    		<div class="left">
		    	    			<img src="../images/60x60.gif"/>
		    	    		</div>
		    	    		<div class="right">
		    	    			<div id="">
		    	    				某某  | 100002 
		    	    			</div>
		    	    			<div id="" class="fe08">
		    	    				补水年卡    消费时间 2018-12-01
		    	    			</div>
		    	    			<div id="" class="fe08">
		    	    				余额：0.00元
		    	    			</div>
		    	    		</div>
		    	    </div>
			    	<div class="mui-input-row mui-checkbox checklist">
			    	    <label></label>
			    	    <input name="Checkbox" type="checkbox" checked>
			    	</div>
		    	</div>
		    	   -->
				</div>

				<div class="morediv hidden" id="moreid">
					<span id="more_list">更多</span>
				</div>
				<div class="fgd"></div>
			</div>

			<div class="footdiv">
				<div class="fleft">
					<div class="mui-input-row mui-checkbox ">
						<label>全选</label>
						<input name="Checkbox" id="checkall" type="checkbox">
					</div>
					<div id="nums">

					</div>
				</div>
				<div class="fright" id="send_message">
					发送短信
				</div>
			</div>

		</div>
		<div id="popover" class="mui-popover">
			<div class="listdiv">
				<textarea name="" rows="6" id="qunfa" cols=""></textarea>
				<div class="mui-input-row mui-checkbox">
					<label>是否启用</label>
					<input name="checkbox1" value="" id="is_use" type="checkbox" checked>
				</div>
				<div class="footbutdiv">
					<button type="button" id="modifybut" class="mui-btn mui-btn-blue mui-btn-block">修改</button>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">发送</button>
				</div>
			</div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var xftimetype = false, //消费时间
				kyetype = false, //卡余额
				ljxftype = false, //累计消费
				flag = false, //是否上拉
				level_id = 0, //会员等级id
				sort_field = '', //余额 累计 或者消费时间
				sort_type = '', //升序 desc倒序
				store_id = 0, //门店id
				type = "phone",
				page = 1; //分页

			var mlist = [];
			window.onload = function() {
				//初始化 加载
				
				mui.init({
					pullRefresh: {
						container: '#refreshContainer',
						down: {
							height:50,//可选,默认50.触发下拉刷新拖动距离,
					        auto: false,//可选,默认false.首次加载自动下拉刷新一次
					        contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
					        contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
					        contentrefresh : "正在刷新...",
							callback: pulldownRefresh
						},
						up: {
							callback: pullupRefresh
						}
					}
				});

				function pullupRefresh() {
					more_list();
					mui('#refreshContainer').pullRefresh().endPullupToRefresh();
				}

				function pulldownRefresh() {
					page = 1;
					g("tlist").innerHTML = '';
					mlist = [];
					getmemlist();
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					mui('#refreshContainer').pullRefresh().refresh(true);
				}

				//阻尼系数
				/*var deceleration = mui.os.ios?0.003:0.0009;
				mui('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});		  
				*/
				//获取门店		   
				//获取默认会员列表
				getmemlist();
				//mui('.mui-scroll-wrapper').scroll();

				$("#tlist").on("tap", ".listdivcss", function(el) {
					gomemberinfo($(this).attr("data-id"));
				})

				//监听发送
				g("send_message").addEventListener("tap", function(e) {
					get_message();
					mui('#popover').popover('toggle', g("popover"));
				})

				//更多
				g("more_list").addEventListener("tap", function() {
					more_list();
				})

				var stextPicker = new mui.PopPicker();
				stextPicker.setData([{
					value: 'phone',
					text: '手机'
				}, {
					value: 'card_number',
					text: '卡号'
				}, {
					value: 'username',
					text: '昵称'
				}, {
					value: 'plate_number',
					text: '车牌号'
				}]);
				var stext = document.getElementById('stext');
				stext.addEventListener('tap', function(event) {
					stextPicker.show(function(items) {
						stext.innerHTML = items[0].text + '<div class="sjx"></div>';
						type = items[0].value;
						page = 1;
						mlist = [];
					});
				}, false);

				//监听修改
				g("modifybut").addEventListener("tap", function() {
					var data = {
						url: "/api/message/custom_message",
						data: {
							access_token: acctoken(),
							message: [{
								"message_id": 18,
								"content": g("qunfa").value || "",
								"is_use": $("#is_use").is(":checked") ? 1 : 2,
							}]
						}
					}
					ajax(data, function(res) {
						console.log(res);
						mui.toast(res.msg);
						get_message();
					})

				})

				//监听确定
				g("okbut").addEventListener("tap", function(e) {
					var listBox = mui('.listcheckbox');
					console.log(listBox);
					var slist = [];
					if(listBox.length) {
						listBox.each(function(index, item) {
							var mid = $(item).attr("data-id");
							if($(item).prop("checked")) {
								console.log(mid)
								slist.push({
									member_id: mid
								});
							}
						})
						if(!slist.length) {
							mui.toast("请选择会员");
							return;
						}
						var data = {
							url: "/api/message/send",
							data: {
								access_token: acctoken(),
								message_id: 18,
								member: slist,
							}
						}

						ajax(data, function(res) {
							console.log(res);
							mui.toast(res.msg);
						})
					} else {
						mui.toast("请选择会员");
					}

				})

				g("smid").addEventListener("tap", function(e) {
					mui.openWindow({
						url: '../general/scanning-page.html',
						id: 'scanning-page',
						show: {
							aniShow: 'zoom-fade-in',
							duration: 300
						},
						waiting: {
							autoShow: true
						}
					});

				})

				g('checkall').addEventListener('change', function() {
					var listBox = mui('.listcheckbox');
					if(this.checked) {
						listBox.each(function() {
							this.checked = true;
						})
					} else {
						listBox.each(function() {
							this.checked = false;
						})
					}
					getnums();
				})

//监听添加会员
				/*g("store").addEventListener("tap", function() {
					
					

				})*/
				//监听添加会员
				g("adddiv").addEventListener("tap", function() {
					
					//console.log("添加");
					//return;
					mui.openWindow({
						url: 'addmembers2.html',
						id: 'addmembers2'
					})

				})

				//卡余额
				g("kye").addEventListener("tap", function() {
					var div = this.getElementsByTagName("div");
					sort_field = "stay_money";
					if(kyetype == false) {
						settop(div);
						sort_type = 'asc';
						kyetype = !kyetype;
					} else {
						setbot(div);
						sort_type = 'desc';
						kyetype = !kyetype;
					}
					page = 1;
					mlist = [];
					upToRefresh();
					getmemlist();
				})
				//累计消费
				g("ljxf").addEventListener("tap", function() {
					var div = this.getElementsByTagName("div");
					sort_field = "total_pay"
					if(ljxftype == false) {
						settop(div);
						sort_type = 'asc';
						ljxftype = !ljxftype;
					} else {
						setbot(div);
						sort_type = 'desc';
						ljxftype = !ljxftype;
					}
					page = 1;
					mlist = [];
					upToRefresh();
					getmemlist();
				})
				//消费时间
				g("xftime").addEventListener("tap", function() {
					var div = this.getElementsByTagName("div");
					sort_field = "last_consume"
					if(xftimetype == false) {
						settop(div);
						sort_type = 'asc';
						xftimetype = !xftimetype;
					} else {
						setbot(div);
						sort_type = 'desc';
						xftimetype = !xftimetype;
					}
					page = 1;
					mlist = [];
					upToRefresh();
					getmemlist();
				})

				mui.ready(function() {
					var data = {
						url: "/api/member_level/lst",
						data: {
							access_token: acctoken(),
						}
					}

					ajax(data, function(res) {
						console.log("等级列表", res);
						var levellist = [];
						var list = res.data.data;
						levellist.push({
							value: 0,
							text: "全部"
						})
						list.forEach(function(item, index) {
							levellist.push({
								value: item.id,
								text: item.member_level
							})
						})

						var allidPicker = new mui.PopPicker();
						allidPicker.setData(levellist);
						var allid = document.getElementById('allid');
						allid.addEventListener('tap', function(event) {
							allidPicker.show(function(items) {
								level_id = items[0].value;
								g("alltext").innerHTML = items[0].text;
								page = 1;
								mlist = [];
								upToRefresh();
								getmemlist();
							});
						}, false);
					})
				});

				document.onkeydown = function(event) {
					var e = event || window.event || arguments.callee.caller.arguments[0];
					if(e && e.keyCode == 13) {
						page = 1;
						mlist = [];
						upToRefresh();
						getmemlist();
					}
				}
				store();
			}
			
			//获取门店列表
			function store(){
				var data = {
					url:"/api/store/lst",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("门店列表",res)
					setpop(res.data)
				})
			}
			function setpop(list){
				var list1 = [];
				for(var i = 0; i < list.length; i++){
							var str = {value:list[i].id,text:list[i].store_name}
							list1.push(str);
				}
				var storePicker = new mui.PopPicker();
                storePicker.setData(list1);
                var storediv = document.getElementById('store');
                storediv.addEventListener('tap', function(event) {
                    storePicker.show(function(items) {
                        //storediv.innerText = items[0].text;
                        store_id = items[0].value;
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                        page = 1;
						mlist = [];
						upToRefresh();
                        getmemlist();
                    });
                }, false);
			}
			

			//获取短信模板
			function get_message() {
				var reqdata = {
					url: "/api/message/detail",
					data: {
						access_token: acctoken(),
						message_id: 18,
					}
				}

				ajax(reqdata, function(res) {
					console.log("获取群发模板", res);
					if(res.data.custom_content.length) {
						g("qunfa").value = res.data.custom_content[0].content;
					} else {
						g("qunfa").value = res.data.content;
					}
				})
			}

			//更多
			function more_list() {
				console.log("更多")
				page++;
				getmemlist();
			}
			
			
			//刷新函数，本页和子页调用
			function refresh(){
				page = 1;
				mlist = [];
				getmemlist();
				mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
				mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);
			}
			//模糊查询会员
			function fuzzy_search() {
				var data = {
					url: "/api/member/fuzzy_search",
					data: {
						access_token: acctoken(),
						key: g("keyvalue").value || "",
						type: type,
						self: 1,
					}
				}
				ajax(data, function(res) {
					console.log("查找的会员", res);
					let list = res.data.data;
					mlist = [];
					if(list.length) {
						list.forEach(function(item, index) {
							mlist.push(item);
						})
						mlist = remove_duplicate(mlist);
						setmemlist(mlist);
						$("#moreid").removeClass("hidden");
					} else {
						if(page == 1) {
							let str = `<div class="nolistdiv">暂无记录<div>`
							g("tlist").innerHTML = str;
						} else {
							page--
							$("#moreid").addClass("hidden");
							mui.toast('没有更多数据了');
						}
					}
					//setmemlist(res.data.data);
					//mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
				})

			}

			//扫描页面调用
			function setcard_number(scan) {
				console.log("回调")
				g("keyvalue").value = scan;
				g("stext").innerHTML = '卡号<div class="sjx"></div>';
			    type = 'card_number';
				page = 1;
				mlist = [];
				upToRefresh();
				getmemlist();
			}

			//计算勾选会员
			function getnums() {
				var nums = 0;
				var listBox = mui('.listcheckbox');
				listBox.each(function() {
					if(this.checked) {
						nums++;
					}
				})
				document.getElementById('nums').innerHTML = "共" + nums + "位会员";
			}
			//复选框事件
			function setcheckbox(e) {
				if(!e.checked) {
					//$('#checkall').removeAttribute('checked');
					document.getElementById('checkall').checked = false;
				}
				getnums();
			}

			//获取会员列表
			function getmemlist() {
				var data = {
					url: "/api/member/lst",
					data: {
						access_token: acctoken(),
						level_id: level_id,
						sort_field: sort_field,
						key: g("keyvalue").value || "",
						type: type,
						sort_type: sort_type,
						store_id: store_id,
						page: page,
						self:1
					}
				}
				ajax(data, function(res) {
					console.log("会员列表", res)
					let list = res.data.data;
					if(list.length) {
						list.forEach(function(item, index) {
							mlist.push(item);
						})
						mlist = remove_duplicate(mlist);
						setmemlist(mlist);
						$("#moreid").removeClass("hidden");
					} else {
						$("#moreid").addClass("hidden");
						if(page == 1) {
							let str = `<div class="nolistdiv">暂无记录<div>`
							g("tlist").innerHTML = str;
						} else {
							upToRefresh();
							page--;
							mui.toast('没有更多数据了');
						}
						
					}
				})

			}
			//设置html
			function setmemlist(list) {
				var str = "";
				if(list.length) {
					list.forEach(function(item, index) {
						str += '<div class="listdivcss" data-id="' + item.id + '" >' +
							'<div class="flex1" ><div class="left">';
						if(item.images && item.images.path_name) {
							str += '<img class="border50" src="' + item.images.path_name + '"/>'
						} else {
							str += '<img class="border50" src="../img/member-header.png"/>';
						}
						str += '</div><div class="right"><div id="">' +
							item.username + ' | ' + item.card_number +
							'</div><div id="" >';
						try {
							str += item.member_level.member_level;
						} catch(e) {}
						str += ' | 累计消费：' + item.total_pay;
						str += '</div><div id="">' +
							'消费时间 :' + item.last_consume;

						str += '</div><div id="" >' +
							'余额：' + item.stay_money + '元 ' +
							'<span>积分：' + item.stay_score + '</span></div></div></div>' +
							'<div class="mui-input-row mui-checkbox checklist"><label></label>' +
							'<input name="Checkbox" type="checkbox" data-id="' + item.id + '" class="listcheckbox" onchange="setcheckbox(this)"></div></div>';
					})
				} else {
					var str = '<div class="nolistdiv">暂无会员</div>';
				}
				g("tlist").innerHTML = str;
			}

			//设置三角形
			function settop(div) {
				div[1].className = "br";
				div[2].className = "tc";
			}

			function setbot(div) {
				div[1].className = "bc";
				div[2].className = "tr";
			}

			//跳转会员详情页
			function gomemberinfo(mid) {
				console.log(mid);
				mui.openWindow({
					url: 'members/membership-details.html?mid=' + mid,
					id: 'membership-details'
				});
			}
			
			
			function ontoast(str){
				mui.toast(str);
			}
		</script>
	</body>

</html>